<template>
	<view class="content">
		
		<view class="login-t">
			请填写注册信息
		</view>
		
	
		<view class="loginButtonStyleView" >
				<input class='inputView'  v-model="cardNum" placeholder='请设置账号' focus placeholder-class="inputpalceView">
				
				
				</input>
				
				<!-- <view class="placeHolderRed" v-if="cardNum ==''">6-16位 字母、数字任意组</view> -->
				
				
				
				<!-- <input  type="text" @input="changeInput" placeholder="请输入卡号"  /> -->
		</view>
			
		<view class="loginButtonStyleView">
			<input class="inputView" :password="true" placeholder-class="inputpalceView" type="text" v-model="pwd" placeholder="请设置密码" />
			
			<!-- <view class="placeHolderRed" style="top: 307upx;" v-if="pwd ==''">8-18位 必须包含字母和数字</view> -->
		
		</view>
			
		<view class="loginButtonStyleView">
			<input class="inputView" type="number" v-model="mobile" :maxlength="maxMobile" placeholder="请输入手机号码" placeholder-class="inputpalceView" />
		</view>
	
			
		<view class="loginButtonStyleView" style="justify-content: space-between;" >
			<input class="inputView" placeholder-class="inputpalceView" type="number" v-model="code" placeholder="请输入短信验证码" />
			<view class="getVercode" @click="sendCode" v-if="verification">发送验证码</view>
			<view class="outTimeView" v-if="!verification">{{ timer }} 秒后重新获取</view>
		</view>
			
		<view class="loginButtonStyleView" style="justify-content: space-between;">
			<input class='inputView' v-model="intiterCode" placeholder-class="inputpalceView" placeholder='邀请码' @blur="changeInput"></input>
			<view  style="color: red; margin-right: 32upx;"  v-if="inviterStatus > 0">{{inviterStatus==2?inviterName:'推荐码错误'}}</view>
	
		</view>
			
		
			
		<view class="loginButtonStyleView" >
			<input class='inputView' v-model="nickName" placeholder='请设置你的昵称' placeholder-class="inputpalceView"></input>
			<!-- <input  type="text" @input="changeInput" placeholder="请输入卡号"  /> -->
		</view>	
			
			
			
			
		
			
			<view v-if="showLogin==1" @click="gotologin" class="loginview">已有账号，点此登录</view>
			
			

			
	<view class="agreement">
			登录即代表您已同意
		<view @click="goAgreement()" class="hintArrow">《服务协议》</view>
		及
		<view @click="goPrivacy()" class="hintArrow">《隐私政策》</view>
	</view>
	
	
	<view class="btttonView" @click="toReg()">免费注册
		
		<!-- <view class="loginView" @click="loginHandler">注册</view> -->
	</view>
	
	<!-- <view style="width: 100%;height: 100upx;"></view> -->


	</view>
</template>

<script>
import { goBack } from '@/config/mixins.js';
export default {
	mixins: [goBack],
	data() {
		return {
			maxMobile: 11,
			cardNum : '',
			mobile: '', // 用户手机号
			code: '', // 短信验证码
			pwd: '', // 用户密码
			intiterCode : '',
			verification: true, // 通过v-show控制显示获取还是倒计时
			inviterStatus : 0,
			timer: 60, // 定义初始时间为60s
			nickName: '',
			inviterName : '',
			btnb: 'btn btn-c btn-square btn-all', //按钮背景
			showLogin : ''
		};
	},
	onLoad(options) {
		let _this = this;
		_this.timer = parseInt(_this.$db.get('timer'));
		if (_this.timer != null && _this.timer > 0) {
			_this.countDown();
			_this.verification = false;
		}
		
		
		if (options.gooddetailenter){
			
			// console.log();
			this.showLogin = options.gooddetailenter;
		}
		

		if (options.invitecode) {
			this.$db.set('invitecode', options.invitecode);
		}
		
		
		
		let invitecode = this.$db.get('invitecode', true);
		
		if (invitecode){
			
			this.intiterCode = invitecode;
			
			this.changeInput();
			
		}
		
		// console.log(invitecode);
		
	},
	computed: {
		// 验证手机号
		rightMobile() {
			let res = {};
			if (!this.mobile) {
				res.status = false;
				res.msg = '请输入手机号';
			} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
				res.status = false;
				res.msg = '手机号格式不正确';
			} else {
				res.status = true;
			}
			return res;
		},
		
		
		
	username() {
		let res = {};
		
		if (!this.cardNum) {
			res.status = false;
			res.msg = '请输入账号';
		} else if (!/^[0-9a-zA-Z_]{6,16}$/.test(this.cardNum)) {
			res.status = false;
			res.msg = '账号 6～16个字符，可使用字母、数字、下划线';
		} else {
			res.status = true;
		}
		return res;
	},
	
	
	passwordVer() {
		let res = {};
		
		console.log(this.pwd)
		
		if (!this.pwd) {
			res.status = false;
			res.msg = '请输入密码';
			console.log(res)
		}else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,18})$/.test(this.pwd)) {
			res.status = false;
			res.msg = '密码 6～18个字符，可使用字母、数字、下划线';
		} else if (!/^[0-9a-zA-Z_]{6,18}$/.test(this.pwd)) {
			res.status = false;
			res.msg = '密码 6～18个字符，可使用字母、数字、下划线';
		} else {
			res.status = true;
		}
		return res;
	},
	
		
		// 动态更改登录按钮bg
		regButtonClass() {
			return this.mobile && this.mobile.length === 11 && this.pwd && this.code ? this.btnb + ' btn-b' : this.btnb;
		},
		// 动态修改发送验证码按钮
		sendCodeBtn() {
			let btn = 'btn btn-g';
			if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
				return btn + ' btn-b';
			} else {
				return btn;
			}
		},
		logoImage() {
			return this.$store.state.config.shop_logo;
		}
	},
	

	onShow() {
		let _this = this;
		let userToken = _this.$db.get('userToken');
		if (userToken && userToken != '') {
			uni.switchTab({
				url: '/pages/member/index/index'
			});
			return true;
		}
		_this.timer = parseInt(_this.$db.get('timer'));
		if (_this.timer != null && _this.timer > 0) {
			_this.countDown();
			_this.verification = false;
		}
	},
	methods: {
		
		changeInput(event){
			let name = this.intiterCode;
			console.log(name);
			
			// this.inviterStatus = 0;
			
				// console.log(name.length);
			
			// if(name.length <4){
				
			// 	this.inviterStatus = 0;
				
			// 	return;
			// }
			
		
			
			
			// this.$common.loadToHide();
			
			this.$api.verifyInviter({ invitecode: name , noshow : 1}, res => {
				
				console.log(res)
				
				if (res.status) {
					this.inviterStatus = 2;
					
					this.inviterName = res.username;
					
					console.log(this.inviterName);
					
				} else {
					this.inviterStatus = 1;
					// this.$common.errorToShow(res.msg);
				}
			});


// 3705
			// this.$api.sms({ mobile: this.mobile, code: 'login' }, res => {
			// 	if (res.status) {
			// 		this.timer = 60;
			// 		this.verification = false;
			// 		this.$common.successToShow(res.msg);
			// 		this.countDown(); // 执行验证码计时
			// 		this.btnb = 'btn btn-square btn-all btn-b';
			// 	} else {
			// 		this.$common.errorToShow(res.msg);
			// 	}
			// });
			
		},
		
		gotologin(){
			
			this.$common.navigateTo('/pages/login/login/index1?');
			
			
		},
		
		
		// 发送短信验证码
		sendCode() {
			if (!this.rightMobile.status) {
				this.$common.errorToShow(this.rightMobile.msg);
			} else {
				this.$common.loadToShow('发送中...');
				setTimeout(() => {
					this.$common.loadToHide();
					this.$api.sms({ mobile: this.mobile, code: 'login' }, res => {
						
						// console.log(11111)
						
						if (res.status) {
							this.timer = 60;
							this.verification = false;
							this.$common.successToShow(res.msg);
							this.countDown(); // 执行验证码计时
							this.btnb = 'btn btn-square btn-all btn-b';
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
				}, 1000);
			}
		},
		// 验证码倒计时
		countDown() {
			let auth_timer = setInterval(() => {
				// 定时器设置每秒递减
				this.timer--; // 递减时间
				uni.setStorage({
					key: 'timer',
					data: this.timer,
					success: function() {}
				});
				if (this.timer <= 0) {
					this.verification = true; // 60s时间结束还原v-show状态并清除定时器
					clearInterval(auth_timer);
				}
			}, 1000);
		},
		toReg() {
			
	
	if (!this.username.status) {
		this.$common.errorToShow(this.username.msg);
	}else if (!this.passwordVer.status){
		this.$common.errorToShow(this.passwordVer.msg);
	} else if (!this.rightMobile.status) {
		this.$common.errorToShow(this.rightMobile.msg);
	}else if (!this.code) {
		this.$common.errorToShow('请输入短信验证码');
	}else if (this.inviterStatus !=2) {
		this.$common.errorToShow('请输入正确的邀请码');
	}else if (!this.nickName)
	{
		this.$common.errorToShow('请输入昵称');
	}else {
				let data = {
					username : this.cardNum,
					mobile: this.mobile,
					code: this.code,
					invitecode : this.intiterCode,
					password: this.pwd,
					nickname : this.nickName
				};

				// 获取邀请码
				// let invicode = this.$db.get('invitecode');
				// if (invicode) {
				// 	data.invitecode = invicode;
				// }
				this.$api.smsLogin(data, res => {
					if (res.status) {
						this.$db.set('userToken', res.data);
						this.$common.successToShow('注册成功', () => {
							// 清除随机uid 和 邀请码
							this.$db.del('uuid');
							this.$db.del('invitecode');
							let redirect = this.$store.state.redirectPage ? this.$store.state.redirectPage : '/pages/member/index/index';
							this.$store.commit({
								type: 'redirect',
								page: ''
							});
							uni.reLaunch({
								url: redirect
							});
						});
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			}
		},
		toLogin() {
			this.$common.redirectTo('/pages/login/login/index1');
		},
		// 跳转到用户协议
		goAgreement() {
			let articleId = this.$store.state.config.user_agreement_id;
			this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
		},
		// 跳转到隐私政策
		goPrivacy() {
			let articleId = this.$store.state.config.privacy_policy_id;
			this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
		}
	}
};
</script>

<style lang="scss">


	page{
		background-color:  #EDEDED;
		
	}
	
.content {

	// background-color: #fff;
	
	// margin-bottom: 100upx;
	
	padding-bottom: 100upx;

	// padding: 0upx 100upx;
}

.login-t {
	
	font-size: 60upx;
	// height: 300upx;
	color: #FF5A5F;
	
	margin-top: 80upx;
	
	margin-left: 36upx;
	// font
	font-weight: bold;
		// padding: 50upx 0;
		
		
}



	.loginButtonStyleView{
		

		
		margin-left: 36upx;
		
		
		margin-top: 36upx;
		
		width: 678upx;
		
		height: 114upx;
		
		// margin-left: 36upx;
		
		border-radius: 5upx;
		
		background-color: #FFFFFF;
		
			
		// box-shadow: 0upx 4upx 0upx 0upx rgba(255, 0, 0, 1);
		
		
		// box-shadow: 0upx 2upx 0upx 0upx rgba(0, 0, 0, 1);
		
		// box-shadow: 0upx 1upx 1upx 0upx rgba(166, 166, 166, 40);
		// box-shadow: 0upx 6upx 0upx 0upx rgba(255, 0, 0, 1);
		
		// box-shadow-x:;
		
		display: flex;
			
		flex-direction: row;
		
		align-items: center;
		
		
		
		// box-shadow:   0px 2upx 4upx rgba(0,0,0,0.03),  0upx 4upx 8upx rgba(0,0,0,0.03),0upx 6upx 14upx rgba(0,0,0,0.06);    
		
		
	}


	.inputView{
		
		width: 400upx;
		
		margin-left: 30upx;
		
		height: 100%;
		
		font-size: 30upx;
		
		// background-color: #0D9E13;
		
		// float: left;
		
	}
	
	.placeHolderRed{
		// font-family: PingFangSC-Regular;
		// font-size: 30px;
		// color: #8AA3B9;
		
		position: absolute;
		
		left: 240upx;
		
		top: 156upx;
		
		color: #E02020;
		
		font-size: 26upx;
		
		// text-align: left;
		
		width: 400upx;
		
		// background-color: #007AFF;
		
		// margin-left: -200upx;
		
	}
	
	.getVercode{
		
		font-size: 32upx;
			
		color: #FF5A5F;
		
		// background-color: #007AFF;
		
		margin-right: 36upx;
		
		
	}
	
	
	.outTimeView{
		
		font-size: 28upx;
			
		color: #FF5A5F;
		
		// background-color: #007AFF;
		
		margin-right: 36upx;
		
	}
	
	
	.inputpalceView{
		
		font-size: 30upx;
			
		color: #8AA3B9;
		
	}




	

	
	.loginview{
		
		// background: #007AFF;
	margin-top: 30upx;
	
	margin-right: 36upx;
	// width: 100%;
	text-align: right;
	font-size: 24upx;
	// background-color: ;
	color: #5565FB;
		
	}
	
	
	
	.agreement {
		// margin: 20rpx 0;
	
	
		margin-top: 36upx;
		
		// 8AA3B9
		
		font-size: 24upx;
		// background-color: ;
		color: #3A3A3A;
	
		// background-color: #007AFF;
		
		display: flex;
		
		flex-direction: row;
		
		
		// text-align: center;
		
		justify-content: center;
		
	}
	
	
	.hintArrow {
		
		font-size: 24upx;
		
		color: #FF5A5F;
	}
	
	
	.btttonView{
		
		margin-top: 35upx;
		
		
		margin-left: 36upx;
	
		text-align: center;
		
		width: 678upx;
		
		height: 90upx;
		
		// margin-left: 36upx;
		
		font-size: 36upx;
		
		color: #FFFFFF;
		
		line-height: 90upx;
		
		// border-radius: 45upx;
		
		
		background-color: #FF5A5F;
		
		
		box-shadow:   0px 3upx 7upx rgba(0,0,0,0.06),  0upx 2upx 4upx rgba(0,0,0,0.03),0upx 1upx 2upx rgba(0,0,0,0.03);
		
		
	
	
	}


</style>
